<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>轮播图</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <!-- 轮播图容器 -->
  <div class="carousel-container">
    <!-- 轮播图滑动 -->
    <div class="carousel-slide">
      <!-- 轮播图点击 -->
      <div class="slide 
      active"><img src="https://picsum.photos/id/1015/800/400" alt="风景1"></div>
      <div class="slide"><img src="https://picsum.photos/id/1016/800/400" alt="风景2"></div>
      <div class="slide"><img src="https://picsum.photos/id/1018/800/400" alt="风景3">
      </div>
    </div>

    <!-- 左右箭头切换按钮 -->
    <button class="carousel-arrow left" id="prevBtn">&lt;</button>
    <button class="carousel-arrow right" id="nextBtn">&gt;</button>

    <!-- 底部指示点 -->
    <div class="carousel-indicators" id="indicators"></div>
  </div>

  <script src="script.js"></script>
</body>

</html>